<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>页面标题自定义</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="0px">
                <div class="flex cus-elfrom flex-wrap">
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">直播列表</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.live" placeholder="请输入直播列表标题" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">外卖名称</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.takeOut" placeholder="请输入外卖名称" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">店内名称</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.inStore" placeholder="请输入店内名称" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">积分名称</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.integral" placeholder="请输入积分名称" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">余额名称</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.balance" placeholder="请输入余额名称" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">充值标题</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.rechargeTitle" placeholder="请输入充值标题" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">资讯中心</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.informationTitle" placeholder="请输入充值标题" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="shuju_title mar_b20 mar_t10">
                        <div class="shuju_title_text">
                            <span>功能名称自定义</span>
                        </div>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">平台红包标题</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.systemRedbag" placeholder="请输入平台红包标题" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">货币符号(￥)</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.hbfh" placeholder="请输入货币符号" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">货币名称(元)</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.hbmc" placeholder="请输入货币名称" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                        <div class="left-title">订单序号名称</div>
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.orderNumber" placeholder="请输入自定义订单序号名称" class="cus-height"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                      <div class="left-title">店内就餐名称</div>
                      <el-form-item label="" prop="name">
                        <el-input v-model="form.dnjc" placeholder="请输入自定义店内就餐名称" class="cus-height"></el-input>
                      </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                      <div class="left-title">打包带走名称</div>
                      <el-form-item label="" prop="name">
                        <el-input v-model="form.dbdz" placeholder="请输入自定义打包带走名称" class="cus-height"></el-input>
                      </el-form-item>
                    </div>
                    <div class="flex wid50 mar_b10">
                      <div class="left-title">商品加料名称</div>
                      <el-form-item label="" prop="name">
                        <el-input v-model="form.feedName" placeholder="请输入自定义商品加料名称" class="cus-height"></el-input>
                      </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {getConfig, postConfig} from "@/api/setup";

    export default {
        created() {
            this.bus.$emit('loading', true);
            this.init();
        },
        data() {
            return {
                form: {
                    live: '',
                    takeOut: '',
                    inStore: '',
                    integral: '',
                    balance: '',
                    rechargeTitle: '',
                    informationTitle: '',
                    systemRedbag: '',
                    hbfh: '',
                    hbmc: '',
                    orderNumber: '',
                    dnjc: '',
                    dbdz: '',
                    feedName: '',
                },
            }
        },
        methods: {
            async init() {
                const {data} = await getConfig({ident: 'customName'});
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                this.bus.$emit('loading', false)
            },
            submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.ident = 'customName'
                        this.form.identName = '自定义名称配置'
                        const {msg} = await postConfig(this.form);
                        this.$baseMessage(msg, "success");
                        this.init();
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .cus-elfrom .el-form-item {
        margin-bottom: 0px;
    }
    .cus-elfrom .left-title{
        color: #409EFF;
        background: #ecf5ff;
        line-height: 1;
        white-space: nowrap;
        text-align: left;
        box-sizing: border-box;
        font-weight: 500;
        padding: 10px 10px;
        width: 120px;
        margin-right: 20px;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid #b3d8ff;
    }
    .cus-elfrom .el-input{
        margin-right: 120px;
    }
    .cus-height{
        width: 600px !important;
    }
    .cus-height .el-input__inner{
        height: 36px;
        line-height: 36px;
    }
</style>
